<template>
    <div class="container">
        <!-- sy-boxa -->
        <div class="sy-boxa mt20">
            <div class="sy-boxa-a flex-align mt14">
                <div class="sy-boxa-a-a">手游</div>
                <ul class="sy-boxa-a-ul flex1 flex-align flex-wrap">
                    <li class="ellipsis" v-for="(item, index) in topData.mobile" :key="index">
                        <nuxt-link to="">{{ item.game_name }}</nuxt-link>
                    </li>
                </ul>
            </div>
            <div class="sy-boxa-a flex-align mt17">
                <div class="sy-boxa-a-a">H5</div>
                <ul class="sy-boxa-a-ul flex1 flex-align flex-wrap">
                    <li class="ellipsis" v-for="(item, index) in topData.h5" :key="index">
                        <nuxt-link to="">{{ item.game_name }}</nuxt-link>
                    </li>
                </ul>
            </div>
            <ul class="sy-boxa-b flex1 flex-align mt23">
                <li class="" v-for="(item, index) in topData.software" :key="index">
                    <nuxt-link to="">
                        <img :src="$used.imgUrl(item.game_icon)" alt="">
                        <div class="ellipsis fz14 mt8">{{ item.game_name }}</div>
                    </nuxt-link>
                </li>
            </ul>
        </div>
        <!-- sy-boxb -->
        <div class="sy-boxb flex flex-between mt20">
            <!-- sy-boxb-l -->
            <div class="sy-boxb-l">
                <div class="sy-boxb-l-nav flex-align flex-between">
                    <div class="flex-center-align" :class="boxbNavIndex == index ? 'on' : ''"
                        v-for="(item, index) in boxbNavList" :key="index" @click="boxbNavIndex = index">{{ item.name }}
                    </div>
                </div>
                <!-- 热门活动 -->
                <div class="sy-boxb-l-con" v-show="boxbNavIndex == 0">
                    <articleUl :list="articleData['1']"></articleUl>
                </div>
                <!-- 游戏攻略 -->
                <div class="sy-boxb-l-con" v-show="boxbNavIndex == 1">
                    <articleUl :list="articleData['2']"></articleUl>
                </div>
                <!-- 软件教程 -->
                <div class="sy-boxb-l-con" v-show="boxbNavIndex == 2">
                    <articleUl :list="articleData['3']"></articleUl>
                </div>
                <!--  -->
            </div>
            <!-- sy-boxb-r -->
            <div class="sy-boxb-r">
                <div class="sy-boxb-r-t">
                    <!--  -->
                    <swiper class="swiper-a" slides-per-view="1" :space-between="0" :modules="modulesA" :autoplay="{
                        delay: 2000,
                        disableOnInteraction: false,
                    }" :loop="true" :thumbs="{ swiper: thumbsSwiper }">
                        <swiper-slide v-for="(item, index) in slideData.top" :key="index">
                            <img class="swiper-a-img" :src="$used.imgUrl(item.game_icon)" alt="">
                            <div class="swiper-a-text">{{ item.game_name }}</div>
                        </swiper-slide>
                    </swiper>
                    <!--  -->
                    <swiper ref="thumbsSwiper" class="swiper-b mt10" slides-per-view="5" :space-between="0"
                        :modules="modulesB" :loop="true" @swiper="setThumbsSwiper" watch-slides-progress>
                        <swiper-slide v-for="(item, index) in slideData.top" :key="index">
                            <img class="swiper-a-img" :src="$used.imgUrl(item.game_icon)" alt="">
                        </swiper-slide>
                    </swiper>
                </div>
                <div class="sy-boxb-r-b">
                    <h3 class="flex-center-align">近期大作</h3>
                    <ul class="flex flex-between flex-wrap">
                        <li v-for="(item, index) in newGameData" :key="index">
                            <nuxt-link class="flex-align" to="">
                                <img :src="$used.imgUrl(item.game_icon)" alt=""></img>
                                <div class="flex1">
                                    <h4 class="fz16 c333 ellipsis">{{ item.game_name }}</h4>
                                    <p class="fz12 c515">大小：{{ item.game_size }}</p>
                                    <p class="fz12 c515">类型：赛车竞速</p>
                                </div>
                            </nuxt-link>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- sy-boxc -->
        <div class="sy-boxc mt20">
            <!--  -->
            <div class="sy-boxc-l">
                <div class="pt16 flex-align">
                    <img src="~/assets/images/index/icon1.png" alt="">
                    <span class="cff8 ml20 fz22 bold">近期</span>
                    <span class=" fz22 bold">新游榜</span>
                </div>
                <div class="sy-boxc-lb">
                    <swiper class="swiper-c" slides-per-view="1" :space-between="0" :modules="modulesC" :autoplay="{
                        delay: 2000,
                        disableOnInteraction: false,
                    }" :loop="true" :thumbs="{ swiper: thumbsSwiperb }">
                        <swiper-slide v-for="(item, index) in slideData.bottom" :key="index">
                            <img class="img100" :src="$used.imgUrl(item.game_icon)" alt="">
                            <div class="swiper-a-text">{{ item.game_name }}</div>
                        </swiper-slide>
                    </swiper>
                    <!--  -->
                    <swiper direction="vertical" ref="thumbsSwiperb" class="swiper-d" slides-per-view="4"
                        :space-between="0" :modules="modulesD" :loop="true" @swiper="setThumbsSwiperb"
                        watch-slides-progress>
                        <swiper-slide v-for="(item, index) in slideData.bottom" :key="index">
                            <div class="swiper-c-li flex-align">
                                <img class="img100" :src="$used.imgUrl(item.game_icon)" alt="">
                                <div class="ml10">
                                    <p class="fz16 cfff">{{ item.game_name }}</p>
                                    <p class="fz12 cfff">类型：赛车竞速</p>
                                    <p class="fz12 cfff">超级折扣</p>
                                </div>
                            </div>
                        </swiper-slide>
                    </swiper>
                </div>
            </div>
            <!--  -->
            <div class="sy-boxc-r">
                <!--  -->
                <div class="sy-boxc-rt box10">
                    <div class="flex-align pt16 pl14">
                        <img src="~/assets/images/index/icon2.png" alt="">
                        <h3 class="fz20 ml20">热门游戏</h3>
                    </div>
                    <ul>
                        <li v-for="(item, index) in hotGameData" :key="index">
                            <nuxt-link class="flex-align" to="">
                                <span>{{ Number(index) + 1 }}</span>
                                <p>{{ item.game_name }}</p>
                            </nuxt-link>
                        </li>
                    </ul>
                </div>
                <!--  -->
                <div class="sy-boxc-rb box10 mt22">
                    <div class="flex-align pt16 pl14">
                        <img src="~/assets/images/index/icon3.png" alt="">
                        <h3 class="fz20 ml20">热门游戏标签</h3>
                    </div>
                    <ul class="ml14">
                        <li v-for="(item, index) in hotTagData" :key="index">
                            <nuxt-link to="">{{ item.name }}</nuxt-link>
                        </li>
                    </ul>
                </div>
            </div>
            <!--  -->
        </div>
        <!-- sy-boxd -->
        <div class="sy-boxd box10 mt20 pt16 pl20 ">
            <div class="flex-align pr20">
                <img src="~/assets/images/index/icon4.png" alt="">
                <span class="cff8 ml20 fz22 bold">手机</span>
                <span class=" fz22 bold">游戏</span>
                <span class="flex1"></span>
                <nuxt-link to="" class="box-more">更多</nuxt-link>
            </div>
            <ul class="sy-boxd-ul flex flex-wrap">
                <li v-for="(item, index) in gameData.mobile" :key="index">
                    <nuxt-link to="">
                        <img :src="$used.imgUrl(item.game_icon)" alt="">
                        <div class="ellipsis fz14 mt8">{{ item.game_name }}</div>
                    </nuxt-link>
                </li>
            </ul>
        </div>
        <!-- sy-boxe -->
        <div class="sy-boxe box10 mt20 pt16 pl20 pb16">
            <div class="flex-align pr20">
                <img src="~/assets/images/index/icon5.png" alt="">
                <span class="cff8 ml20 fz22 bold">游戏</span>
                <span class=" fz22 bold">集合</span>
                <span class="flex1"></span>
                <nuxt-link to="" class="box-more">更多</nuxt-link>
            </div>
            <ul class="sy-boxe-ul flex flex-between mt26">
                <li v-for="(item, index) in collectionData.mobile" :key="index">
                    <nuxt-link to="">
                        <img class="img100" src="~/assets/images/img2.png" alt="">
                        <p class="fz20 cfff">{{ item.name }}</p>
                    </nuxt-link>
                </li>
            </ul>
        </div>
        <!-- sy-boxf -->
        <div class="sy-boxd box10 mt20 pt16 pl20 ">
            <div class="flex-align pr20">
                <img src="~/assets/images/index/icon6.png" alt="">
                <span class="cff8 ml20 fz22 bold">手机</span>
                <span class=" fz22 bold">软件</span>
                <span class="flex1"></span>
                <nuxt-link to="" class="box-more">更多</nuxt-link>
            </div>
            <ul class="sy-boxd-ul flex flex-wrap">
                <li v-for="(item, index) in gameData.software" :key="index">
                    <nuxt-link to="">
                        <img :src="$used.imgUrl(item.game_icon)" alt="">
                        <div class="ellipsis fz14 mt8">{{ item.name }}</div>
                    </nuxt-link>
                </li>
            </ul>
        </div>
        <!-- sy-boxg -->
        <div class="sy-boxe box10 mt20 pt16 pl20 pb16">
            <div class="flex-align pr20">
                <img src="~/assets/images/index/icon7.png" alt="">
                <span class="cff8 ml20 fz22 bold">软件</span>
                <span class=" fz22 bold">集合</span>
                <span class="flex1"></span>
                <nuxt-link to="" class="box-more">更多</nuxt-link>
            </div>
            <ul class="sy-boxe-ul flex flex-between mt26">
                <li v-for="(item, index) in collectionData.software" :key="index">
                    <nuxt-link to="">
                        <!-- <img class="img100" :src="$used.imgUrl(item.game_icon)" alt=""> -->
                        <p class="fz20 cfff">{{ item.name }}</p>
                    </nuxt-link>
                </li>
            </ul>
        </div>
        <!-- sy-boxh -->
        <div class="sy-boxd box10 mt20 pt16 pl20 ">
            <div class="flex-align pr20">
                <img src="~/assets/images/index/icon8.png" alt="">
                <span class="cff8 ml20 fz22 bold">H5</span>
                <span class=" fz22 bold">游戏</span>
                <span class="flex1"></span>
                <nuxt-link to="" class="box-more">更多</nuxt-link>
            </div>
            <ul class="sy-boxd-ul flex flex-wrap">
                <li v-for="(item, index) in gameData.h5" :key="index">
                    <nuxt-link to="">
                        <img :src="$used.imgUrl(item.game_icon)" alt="">
                        <div class="ellipsis fz14 mt8">{{ item.game_name }}</div>
                    </nuxt-link>
                </li>
            </ul>
        </div>
        <!-- sy-boxg -->
        <div class="sy-boxg mt18">
            <div class="sy-boxg-t flex-center-align">
                <img src="~/assets/images/index/icon9.png" alt="">
                <h3 class="ml20">排行榜</h3>
            </div>
            <div class="sy-boxg-b mt30 ovn">
                <ranking type="1" :list="rankingData.Android"></ranking>
                <ranking type="2" :list="rankingData.iOS"></ranking>
                <ranking type="3" :list="rankingData.H5"></ranking>
                <ranking type="4" :list="rankingData.total"></ranking>
            </div>
        </div>
        <!--  -->
    </div>
</template>
<script setup>
const { $api, $used } = useNuxtApp()
/* 关键词描述 */
let pageInfo = useWebsiteStore().getgetMenuInfo('首页');// 调用 store 实例的方法
useSeoMeta({
    title: () => pageInfo.page_title,
    keywords: () => pageInfo.page_keywords,
    description: () => pageInfo.page_description,
})


import articleUl from './components/articleUl.vue';
import ranking from './components/ranking.vue';

/* 轮播图开始 */
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Navigation, Pagination, A11y, Autoplay, Thumbs } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/autoplay';
const swiperList = ref([
    { img: '~/assets/images/img2.png' },
    { img: '~/assets/images/img2.png' },
    { img: '~/assets/images/img2.png' },
    { img: '~/assets/images/img2.png' },
    { img: '~/assets/images/img2.png' },
    { img: '~/assets/images/img2.png' },
    { img: '~/assets/images/img2.png' },
    { img: '~/assets/images/img2.png' },
    { img: '~/assets/images/img2.png' },
])
const modulesA = [Navigation, Pagination, A11y, Autoplay, Thumbs];
const modulesB = [Navigation, Pagination, A11y, Autoplay, Thumbs];
const thumbsSwiper = ref(null);
const setThumbsSwiper = (swiper) => {
    // console.log(swiper);
    thumbsSwiper.value = swiper;
};
/* 轮播图结束 */
/* 轮播图2结束 */
const modulesC = [Navigation, Pagination, A11y, Autoplay, Thumbs];
const modulesD = [Navigation, Pagination, A11y, Autoplay, Thumbs];
const thumbsSwiperb = ref(null);
const setThumbsSwiperb = (swiper) => {
    thumbsSwiperb.value = swiper;
};
/* 轮播图2结束 */


//
const router = useRouter();
const list = ref([
    { id: '1', name: '阿维护江科大' },
    { id: '1', name: '阿维护江科大' },
    { id: '1', name: '阿维护江科大' },
    { id: '1', name: '阿维护江科大' },
    { id: '1', name: '阿维护江科大' },
    { id: '2', name: '阿维' },
    { id: '2', name: '阿维' },
    { id: '2', name: '阿维3' },
    { id: '2', name: '阿维2' },
    { id: '3', name: '阿维1' }
])
//获取首页数据
let articleData = reactive({});//文章数据
let rankingData = reactive({});//排行榜
let collectionData = reactive({});//合集数据
let gameData = reactive({});//游戏数据
let hotTagData = reactive({});//热门游戏标签
let hotGameData = reactive({});//热门游戏
let newPkGameData = reactive({});//近期热游新榜
let newGameData = reactive({});//近期大作
let slideData = reactive({});//轮播图
let topData = reactive({});//顶部

//初始化数据
const getIndexData = async () => {
    let res = await $api.getIndex();;
    if (res && res.code === 200) {
        let data = res.data;
        $used.timeTostr(data, '', 3)
        Object.assign(articleData, data.article);//文章数据
        Object.assign(rankingData, data.ranking);//排行榜
        //合集数据
        let collection = data.collection;
        if (collection) {
            collection.mobile = collection.mobile.slice(0, 5);
            collection.h5 = collection.h5.slice(0, 5);
            collection.software = collection.software.slice(0, 5);
            Object.assign(collectionData, collection);
        }
        //游戏数据
        let game = data.game;
        if (game) {
            game.mobile = game.mobile.slice(0, 22);
            game.h5 = game.h5.slice(0, 22);
            game.software = game.software.slice(0, 22);
            Object.assign(gameData, game);
        }
        //热门游戏标签
        let hot_tag = data.hot_tag;
        if (hot_tag) {
            hot_tag = hot_tag.slice(0, 9);
            Object.assign(hotTagData, hot_tag);
        }
        //热门游戏
        let hot_game = data.hot_game;
        if (hot_game) {
            hot_game = hot_game.slice(0, 8);
            Object.assign(hotGameData, hot_game);
        }
        //近期热游新榜
        Object.assign(newPkGameData, data.new_pk_game);
        //近期大作
        let new_game = data.new_game;
        if (new_game) {
            new_game = new_game.slice(0, 6);
            new_game.forEach(item => {
                item.game_size = $used.sizeTostr(item.game_size);
            })
            Object.assign(newGameData, new_game);
        }
        Object.assign(slideData, data.slide);//轮播图
        Object.assign(topData, data.top);//顶部
    }
}
getIndexData();

let boxbNavList = ref([
    { id: '1', name: '热门活动' },
    { id: '2', name: '游戏攻略' },
    { id: '3', name: '软件教程' }
])
let boxbNavIndex = ref(0);
</script>
<style lang="scss" scoped>
/* sy-boxa */
.sy-boxa {
    position: relative;
    height: 244px;
    background: linear-gradient(180deg, #FFEFBC 0%, #FFFFFF 100%);
    border-radius: 10px;
    border: 1px solid #FFFFFF;
    overflow: hidden;

    .sy-boxa-a {
        padding: 0 0 0 20px;

        overflow: hidden;

        .sy-boxa-a-a {
            text-align: center;
            line-height: 35px;
            width: 76px;
            height: 35px;
            background: #FF8E2B;
            border-radius: 4px;
            font-weight: bold;
            font-size: 18px;
            color: #FFFFFF;
        }

        .sy-boxa-a-ul {
            overflow: hidden;

            li {
                width: 108px;
                padding: 0 10px;
                text-align: center;
                font-size: 16px;
                color: #333333;
                white-space: nowrap;
                overflow: hidden;
                border-right: 1px solid #BBBBBB;
            }
        }
    }

    .sy-boxa-b {
        padding-left: 20px;

        li {
            margin-right: 31px;
            width: 96px;
            overflow: hidden;

            a {
                display: block;
                text-align: center;
                width: 96px;
                overflow: hidden;
            }

            img {
                width: 70px;
                height: 70px;
            }
        }
    }
}

/* sy-boxb */
.sy-boxb {
    position: relative;
    height: 720px;

    .sy-boxb-l {
        position: relative;
        width: 490px;
        height: 100%;
        border-radius: 10px;
        overflow: hidden;

        &::after {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            content: '';
            background: linear-gradient(180deg, #FFDC69 0%, #FEFEFF 100%);
            border-radius: 10px;
            z-index: 1;
        }

        &::before {
            position: absolute;
            left: 1px;
            top: 1px;
            right: 1px;
            bottom: 1px;
            content: '';
            background: linear-gradient(180deg, #FFEFBC 0%, #FEFEFF 100%);
            border-radius: 10px;
            z-index: 2;
        }

        .sy-boxb-l-nav {
            position: relative;
            margin: 1px;
            height: 65px;
            background: linear-gradient(180deg, #FFF0BF 0%, #FEFEFE 100%);
            border-radius: 10px 10px 0 0;
            padding: 16px 20px 0;
            z-index: 4;

            div {
                width: 112px;
                height: 35px;
                border-radius: 4px;
                border: 1px solid #FF8E2B;
                font-size: 18px;
                font-weight: bold;
                cursor: pointer;

                &.on {
                    background: #FF8E2B;
                    color: #ffffff;
                }
            }
        }

        .sy-boxb-l-con {
            position: relative;
            margin: -1px 1px 0;
            padding: 0 14px 0;
            background-color: #ffffff;
            height: 100%;
            overflow: hidden;
            z-index: 5;

        }
    }

    /*sy-boxb-r */
    .sy-boxb-r {
        position: relative;
        width: 688px;
        height: 100%;
        overflow: hidden;

        .sy-boxb-r-t {
            height: 462px;
            background-color: #ffffff;
            border-radius: 10px 10px 0px 0px;
            overflow: hidden;

            .swiper-a {
                height: 375px;

                .swiper-a-img {
                    width: 100%;
                    height: 375px;
                }

                .swiper-a-text {
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    right: 0;
                    z-index: 2;
                    height: 45px;
                    line-height: 45px;
                    background: rgba(0, 0, 0, 0.5);
                    text-align: center;
                    font-size: 18px;
                    color: #FFFFFF;
                }
            }

            .swiper-b {
                margin-left: 15px;

                .swiper-a-img {
                    width: 120px;
                    height: 67px;
                }
            }
        }

        .sy-boxb-r-b {
            margin-top: 20px;
            padding: 16px 0 0 14px;
            height: 237px;
            background: #FFFFFF;
            border-radius: 10px;

            h3 {
                width: 112px;
                height: 35px;
                background: #FF8E2B;
                border-radius: 4px;
                font-weight: bold;
                font-size: 18px;
                color: #FFFFFF;
            }

            ul {
                margin-top: 10px;

                li {
                    margin-top: 10px;
                    display: inline-block;
                    width: 180px;
                    height: 70px;

                    img {
                        margin-right: 12px;
                        width: 70px;
                        height: 70px;
                        border-radius: 10px;
                    }
                }
            }
        }


    }
}

/* sy-boxc */
.sy-boxc {
    position: relative;
    overflow: hidden;

    .sy-boxc-l {
        float: left;
        position: relative;
        padding: 0 20px;
        width: 884px;
        height: 516px;
        background: #FFFFFF;
        border-radius: 10px 10px 10px 10px;

        .sy-boxc-lb {
            position: relative;
            margin-top: 13px;
            width: 860px;
            height: 430px;
            border-radius: 10px;
            overflow: hidden;

            .swiper-c {
                width: 100%;
                height: 100%;

                .swiper-a-text {
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    right: 0;
                    z-index: 2;
                    height: 45px;
                    line-height: 45px;
                    background: rgba(0, 0, 0, 0.5);
                    text-align: center;
                    font-size: 18px;
                    color: #FFFFFF;
                }
            }

            .swiper-d {
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                width: 186px;
                z-index: 2;
                background: rgba(0, 0, 0, 0.4);
                cursor: pointer;

                .swiper-slide-thumb-active {
                    background: rgba(0, 0, 0, 0.5);
                }

                .swiper-c-li {
                    padding: 16px 0 16px 10px;
                    height: 107px;

                    img {
                        width: 70px;
                        height: 70px;
                        border-radius: 10px;
                    }
                }
            }
        }
    }

    .sy-boxc-r {
        float: right;

        .sy-boxc-rt {
            width: 292px;
            height: 264px;

            ul {
                li {
                    display: inline-block;
                    margin-top: 20px;
                    padding: 0 0 0 14px;
                    line-height: 28px;
                    width: 50%;
                    font-size: 16px;

                    &:nth-child(-n+2) {
                        span {
                            color: #FF8E2B;
                        }
                    }

                    span {
                        font-weight: bold;
                        color: #9D9C9A;
                        font-size: 24px;
                    }

                    p {
                        margin-left: 4px;
                    }
                }
            }
        }

        .sy-boxc-rb {
            width: 292px;
            height: 231px;

            ul {
                margin-top: -6px;

                li {
                    display: inline-block;
                    margin: 22px 10px 0 0;
                    width: 79px;
                    height: 24px;
                    background: #FAFAFA;
                    border-radius: 20px;
                    text-align: center;
                    line-height: 24px;
                    font-size: 14px;
                    color: #828282;
                    overflow: hidden;
                }
            }
        }
    }
}

/*sy-boxd */
.sy-boxd {
    .sy-boxd-ul {
        padding-bottom: 16px;
        margin-top: 10px;

        li {
            margin-right: 10px;
            margin-top: 10px;
            width: 96px;
            height: 100px;
            overflow: hidden;

            a {
                display: block;
                text-align: center;
                width: 96px;
                overflow: hidden;
            }

            img {
                width: 70px;
                height: 70px;
            }
        }
    }
}

/*sy-boxe */
.sy-boxe {
    .sy-boxe-ul {
        li {
            position: relative;
            width: 208px;
            height: 116px;
            border-radius: 3px 3px 3px 3px;
            overflow: hidden;

            a:hover {
                p {
                    background: rgba(0, 0, 0, 0.8);
                }
            }

            p {
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                height: 116px;

                z-index: 2;
                text-align: center;
                line-height: 116px;
                background: rgba(0, 0, 0, 0.4);

            }
        }
    }
}

/*sy-boxg */
.sy-boxg {
    .sy-boxg-t {
        position: relative;

        img {
            width: 60px;
            height: 60px;
        }

        h3 {
            font-weight: bold;
            font-size: 25px;
            color: #FF8E2B;
        }

        &::after,
        &::before {
            position: absolute;
            content: '';
            width: 508px;
            top: 50%;
            height: 1px;
            background-color: #FF8E2B;
        }

        &::after {
            left: 0;
        }

        &::before {
            right: 0;
        }
    }

    .sy-boxg-b {}
}
</style>